function useESButton(dom) {
  class ESButton extends HTMLElement {
    constructor() {
      super();
      const template = document.createElement("template");
      template.innerHTML = `<slot></slot>`;
      const templateContent = template.content;
      const shadowRoot = this.attachShadow({ mode: "open" });
      this._shadowRoot = shadowRoot;

      const btn = document.createElement("button");
      btn.appendChild(templateContent.cloneNode(true));
      btn.setAttribute("class", "es_button --round");

      const style = document.createElement("style");

      shadowRoot.append(style);
      shadowRoot.append(btn);
      this.parseStyle("default");
    }
    type = {
      primary: "#06c",
      warning: "red",
      default: "#f0f0f0",
      disabled: "#e8e8e8",
    };
    sizeType = {
      default: {
        fontSize: "14px",
        padding: "12px 23px",
        borderRadius: "4px",
      },
      medium: {
        fontSize: "14px",
        padding: "10px 20px",
        borderRadius: "4px",
      },
      small: {
        fontSize: "12px",
        padding: "9px 15px",
        borderRadius: "3px",
      },
      mini: {
        fontSize: "12px",
        padding: "7px 15px",
        borderRadius: "3px",
      },
    };
    textContent() {
      return `
        .es_button {
            position: relative;
            margin-right: 3px;
            display: inline-block;
            padding: ${this.sizeType[this.size].padding};
            border-radius: ${
              !this.round ? this.sizeType[this.size].borderRadius : "20px"
            };
            background-color: ${this.type[this.btnType]};
            color: ${this.btnColor};
            outline: none;
            border: none;
            box-shadow: 0 3px 5px rgba(0,0,0, .2);
            cursor: pointer;
            font-size:${this.sizeType[this.size].fontSize};
        }
        .es_button.--round{
            border-radius: ${
              this.round ? "20px" : this.sizeType[this.size].borderRadius
            };
        }
        `;
    }
    parseStyle() {
      this.btnType = this.disabled
        ? "disabled"
        : this.getAttribute("type") || "default";
      this.btnColor =
        this.btnType === "disabled"
          ? "#ccc"
          : this.btnType === "default"
          ? "#333"
          : "#fff";
      this.size = this.getAttribute("size") || "default";
      this.plain =
        this.getAttribute("plain") && this.getAttribute("plain") === "true"
          ? true
          : false;
      this.round = !this.plain
        ? this.getAttribute("round") && this.getAttribute("round") === "true"
          ? true
          : false
        : false;
      this._shadowRoot.querySelector("style").textContent = this.textContent();
    }
    attributeChangedCallback(name, oldValue, newValue) {
      console.log("change", name, oldValue, newValue);
    }
    connectedCallback() {
      this.disabled =
        this.getAttribute("disabled") &&
        this.getAttribute("disabled") === "disabled"
          ? true
          : false;
      const clickFn = dom.methods[this.getAttribute("@click")];
      clickFn
        ? !this.disabled
          ? this.addEventListener("click", clickFn)
          : this.removeEventListener("click", clickFn)
        : console.error("[Error]", `Set event click error.`, this);
      this.parseStyle();
    }
    disconnectedCallback() {}
    adoptedCallback() {}
  }

  dom.component("es-button", ESButton);
}
